﻿@model TrafficDto
@{
    var series = SerializationHelper.JsonSerialize(Model.series);
    var categories = SerializationHelper.JsonSerialize(Model.categories);
}
<link href="~/App_Content/Plugin/Kendo/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/App_Content/Plugin/Kendo/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<style>
    .chart { width: 90%; text-align: center; margin: auto; background: #FCFCFC; border: solid 1px #F4F4F4; }
    #chart { margin: 10px 25px; }
</style>
<div class="chart">
    <div id="chart"></div>
</div>
<script>
    function createChart()
    {
        $("#chart").kendoChart({
            title: {
                text: "最近7日趋势图"
            },
            legend: {
                position: "bottom"
            },
            chartArea: {
                background: ""
            },
            seriesDefaults: {
                type: "line"
            },
            series: @Html.Raw(series),
            categoryAxis: {
                categories: @Html.Raw(categories),
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        });
    }
    $(document).ready(createChart);
</script>